<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Agent详情</title>
	<link rel="stylesheet" href="css/xingchao.css">
    <link rel="stylesheet" href="css/jquery.page.css">
	<link rel="stylesheet" href="css/bootstrap-new.css">
	<link rel="stylesheet" href="css/webvowl.css">
	<link rel="stylesheet" href="css/webvowl.app.css">
	<link rel="stylesheet" href="css/zy.css">
	<link rel="stylesheet" href="css/evaluateStar.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript" src="js/jquery.page.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/d3.min.js"></script>
	<script type="text/javascript" src="js/webvowl.js"></script>
	<script type="text/javascript" src="js/webvowl.app.js"></script>
	<script type="text/javascript" src="js/wangEditor.min.js"></script>
	<script type="text/javascript" src="js/evaluateStar.js"></script>
	<script>
		function urlMapNshow(URLValue){
			//var URLValue = document.getElementById("onturl").value;
			if(URLValue==null || URLValue==''){
				alert('Invalid ontology URL, please contact tech support!');
				return;
			}
			var customLabel = document.getElementById("customLabel").value;
			var buttonStatus = document.getElementById("clickShow");	
			$("#clickShow").html("正在执行，可能需要几分钟，请耐心等待。。。");			
			$("#clickShow").attr("disabled",true);
			
			try{
				var chkObjs = document.getElementsByName("targetKG"); 
				for(var i=0;i<chkObjs.length;i++){ 
					if(chkObjs[i].checked){ 
						chk = i; 
						if(chk==1){
							alert('the Baidu Encyclopedia is coming soon!');
						} else if(chk==2){	//pubmed
							$.ajax({
							  url:'http://www.usources.cn:8080/entitylink/urlMap2PubMed',
							  //type:'GET',
							  data:{ontURL:URLValue,cusProURI:customLabel},
							  async: true,
							  cache: false,
							  contentType: false,
							  success:function(data){			  
									document.getElementById("mapresult").value = data;		
							  },
							  error: function (e) {  
									alert(e);
							  }
							});
						} else {
							$.ajax({
							  url:'http://www.usources.cn:8080/entitylink/urlMap2DBPedia',
							  //url:'http://localhost:8080/LSH/entitylink/urlMap2DBPedia',
							  //type:'GET',
							  data:{ontURL:URLValue,cusProURI:customLabel},
							  async: true,
							  cache: false,
							  contentType: false,
							  success:function(data){			  
									document.getElementById("mapresult").value = data;		
							  },
							  error: function (e) {  
									alert(e);
							  }
							});
						}
					}
				} 
			}
			finally{
				//restore the button status
				$("#clickShow").attr("disabled",false);	
				$("#clickShow").html("点击一键融合(结果显示在下方)");
			}				
		}
	</script>
</head>
<body style="background: #EFEFEF;">

<!--  
	头部
-->
<div class="head">
	<div class="w" style="height:50px;">
		<a href="index.html">
			<img src="images/logo.png" alt="" width="150px;">
		</a>
		<ul class="nav r">
	       <li class="cur">
	            <a href="index.html">众源</a>
	            <sub class="sub1"></sub>
	        </li>
	        <li>
	            <a href="ziyuan.html">资源搜索</a>
	            <sub class="sub1"></sub>
	        </li>
	        <li>
	            <a href="jiaocheng.html">使用教程</a>
	            <sub class="sub1"></sub>
	        </li>
	        <!--
             <li>
                 <a href="biaozhun.html" data-localize='top.API'>领域图谱</a>
                 <sub class="sub1"></sub>
             </li>
             -->
	        <li>
	            <a href="page.html">关于我们</a>
	            <sub class="sub1"></sub>
	        </li>
	        <li id='userbox'>
	            <a href="user.html" id="user-box">会员中心</a>|<a href="user.html?action=out">退出</a>
	            <sub class="sub1"></sub>
	        </li>
	        <li id="langBox">
                 <a href="javascript:void(0);" data-lang='zh-CN'>中</a>&nbsp;|
                 <a href="javascript:void(0);" data-lang="en-US">EN</a>
                 <sub class="sub1"></sub>
             </li>
		</ul>
	</div>
</div>

<div class="main w">

	<div class="row">
		<div id="agentInfo" class="soso_list">
		</div>
	</div>
	
<br>
	<span>您可以点击评价此数据集:</span>&nbsp;&nbsp;
	<div id="xzw_starSys">
		<div id="xzw_starBox">
			<ul class="star" id="star" style="margin-bottom: 0px">
				<li><a href="javascript:void(0)" class="one-star">1</a></li>
				<li><a href="javascript:void(0)" class="two-stars">2</a></li>
				<li><a href="javascript:void(0)" class="three-stars">3</a></li>
				<li><a href="javascript:void(0)" class="four-stars">4</a></li>
				<li><a href="javascript:void(0)" class="five-stars">5</a></li>
			</ul>
			<div class="current-rating" id="showb"></div>
		</div>
		<div class="description"></div>
		<div style="clear:both"></div>
	</div>
	<div class="row">
	<ul class="nav nav-tabs" style="margin-top: 18px">
		<li class="active"><a data-toggle="tab" href="#home">概念图</a></li>
		<li id="dataDownLoadPage"><a data-toggle="tab" href="#menu2">数据下载和接口</a></li>
		<li ><a data-toggle="tab" href="#menu3">数据集评价</a></li>
		<li ><a data-toggle="tab" href="#menu4">数据融合</a></li>
		<li ><a data-toggle="tab" href="#menu1">其它类列表</a></li>
	  </ul>
	</div>
	  <div class="tab-content">


		<div id="menu1" class="tab-pane fade">

			<div id="otherClassList" style="margin-top: 20px;margin-bottom: 10px">
		      	<h4 style="font-size:16px">[该机构下其它数据集]</h4>
		      	<div id="descriTable">
					<table class="table table-hover">
					  <thead>
					  	<tr>
					  		<th>No.</th>
					  		<th>类名</th>
					  		<th>concept</th>
					  		<th>实例个数(单位:条)</th>
					  		<th>三元组数量(单位:个)</th>
					  		<th>操作</th>
					  	</tr>
					  </thead>
					  <tbody id="otherTbBody"></tbody>
					</table>
				</div>
			</div>
	    </div>

	    <div id="home" class="tab-pane fade in active">
	    
			
	    <div class="row" style="height: 600px;margin-top: 0px">
		<div class="col-md-9 column">
			<div class="panel panel-default" style="margin-left:-15px">
				<div class="panel-heading">
					当前查看概念 [<a href="javascript:void(0)" onclick="goto();">更多操作</a>][<a href="javascript:void(0)" onclick="owl();">OWL</a>]
					<div style="float: right;">
						<ul id="optionsMenu">
							<li id="pauseOption"><a id="pause-button" href="#">Pause</a></li>
							<li id="resetOption"><a id="reset-button" href="#"
								type="reset">Reset</a></li>
							<li id="filterOption"><a href="#">Filter</a>
								<ul class="toolTipMenu filter">
									<li class="slideOption" id="nodeDegreeFilteringOption"></li>
								</ul>
							</li>
							<li id="gravityOption"><a href="#">Gravity</a>
								<ul class="toolTipMenu gravity">
									<li class="slideOption" id="classSliderOption"></li>
									<li class="slideOption" id="datatypeSliderOption"></li>
								</ul>
							</li>
							<li id="export"><a href="#">Export</a>
								<ul class="toolTipMenu export">
									<li><a href="#" download id="exportSvg">Export as SVG</a></li>
									<li><a href="#" download id="exportJson">Export as JSON</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
				<div class="panel-body" style="font-size: 16px; padding: 5px;">
					<section id="canvasArea">
						<div id="loading-info">
							<div id="loading-error" class="hidden">
								<div id="error-info"></div>
								<div id="error-description-button" class="hidden">Show error details</div>
								<div id="error-description-container" class="hidden">
									<pre id="error-description"></pre>
								</div>
							</div>
							<div id="loading-progress" class="hidden">
								<span>Loading ontology... </span>
								<div class="spin">&#8635;</div>
							</div>
						</div>
						<div id="graph" style="max-height: 600px;"></div>
					</section>
				</div>
			</div>
		</div>
		<div class="col-md-3 column" style="margin-left: -15px; max-height: 662px; background-color: #000000">
			<aside id="detailsArea">
				<section id="generalDetails" style="height: 655px;">
					<h1 id="title"></h1>
						<h5>
							<span><strong>Graph: </strong><span id="about"></span></span> <span><strong>Version:
							</strong><span id="version"></span></span>
						</h5>
						<h5>
							<label>Language: <select id="language" name="language"
								size="1"></select></label>
						</h5>
						<h3 class="accordion-trigger" id="selection-details-trigger"
							style="font-size: 15px;">Selection Details</h3>
						<div class="accordion-container" id="selection-details">
							<div id="classSelectionInformation" class="hidden">
								<p class="propDetails">
									Name: <span id="name"></span>
								</p>
								<p class="propDetails" style="word-wrap: break-word;">
									URI: <a id="uri"></a>
								</p>
								<p class="propDetails">
									Type: <span id="typeNode"></span>
								</p>
								<p class="propDetails">
									Equiv.: <span id="classEquivUri"></span>
								</p>
								<p class="propDetails">
									Disjoint: <span id="disjointNodes"></span>
								</p>
								<p class="propDetails">
									Charac.: <span id="classAttributes"></span>
								</p>
								<p class="propDetails">
									Individuals: <span id="individuals"></span>
								</p>
								<p class="propDetails">
									Description: <span id="nodeDescription"></span>
								</p>
								<p class="propDetails">
									Comment: <span id="nodeComment"></span>
								</p>
							</div>
							<div id="propertySelectionInformation" class="hidden">
								<p class="propDetails">
									Name: <span id="propname"></span>
								</p>
								<p class="propDetails" style="word-wrap: break-word;">
									URI: <a id="propuri"></a>
								</p>
								<p class="propDetails">
									Type: <span id="typeProp"></span>
								</p>
								<p id="inverse" class="propDetails">
									Inverse: <span></span>
								</p>
								<p class="propDetails">
									Domain: <span id="domain"></span>
								</p>
								<p class="propDetails">
									Range: <span id="range"></span>
								</p>
								<p class="propDetails">
									Subprop.: <span id="subproperties"></span>
								</p>
								<p class="propDetails">
									Superprop.: <span id="superproperties"></span>
								</p>
								<p class="propDetails">
									Equiv.: <span id="propEquivUri"></span>
								</p>
								<p id="infoCardinality" class="propDetails">
									Cardinality: <span></span>
								</p>
								<p id="minCardinality" class="propDetails">
									Min. cardinality: <span></span>
								</p>
								<p id="maxCardinality" class="propDetails">
									Max. cardinality: <span></span>
								</p>
								<p class="propDetails">
									Charac.: <span id="propAttributes"></span>
								</p>
								<p class="propDetails">
									Description: <span id="propDescription"></span>
								</p>
								<p class="propDetails">
									Comment: <span id="propComment"></span>
								</p>
							</div>
							<div id="noSelectionInformation">
								<p>
									<span>Select an element in the visualization.</span>
								</p>
							</div>
						</div>
					</section>
				</aside>
			</div>
			<!-- end of right property desc -->
		</div>
	    </div>

	    <div id="menu2" class="tab-pane fade">
	    <div id="thisClassList" style="display: none; margin-left:2px; margin-top: 0px;margin-bottom: 10px">
	      	<h4 style="font-size:16px">[<b>下载此数据集</b>]</h4>
	      	<div id="descriTable">
				<table class="table table-hover">
				  <thead>
				  	<tr>
				  		<th>No.</th>
				  		<th>类名</th>
				  		<th>概念(Concept)</th>
				  		<th>实例数据条数</th>
				  		<th>三元组条数</th>
				  		<th>操作</th>
				  	</tr>
				  </thead>
				  <tbody id="thisTbBody"></tbody>
				</table>
			</div>
		</div>
		<br>
		
	    <br>
	      <h4 style="font-size:16px">[<b>接口调用说明</b>]</h4><p></p>
	
	      	<div class="panel panel-info">
			      <div class="panel-heading">
			        <h3 class="panel-title">接口说明</h3>
			      </div>
			      <div class="panel-body">
			                        <div class="simpleline"><strong>接口地址：</strong><span class="url" id="apiAddress"></span></div>
			                        <div class="simpleline"><strong>支持格式：</strong><span class="url">JSON</span></div>
			                        <div class="simpleline"><strong>请求方式：</strong><span class="url">http get/post</span></div>
			                        <div class="simpleline"><strong>请求示例：</strong><span class="url" id="apiAddressExample"></span></div>
			      </div>
			</div>
			
			<div class="panel panel-info">
		      <div class="panel-heading">参数信息</div>
		      <table class="table table-bordered">
		            <!-- Table -->
		            <thead>
		              <tr>
		                <th>参数</th>
		                <th>p</th>
		                <th>q</th>
		                <th>order</th>
		              </tr>
		            </thead>
		            <tbody>
		              <tr>
		                <th>简介</th>
		                <td>p为page,查看下一页</td>
		                <td>q为检索词</td>
		                <td>order为排序属性字段</td>
		              </tr>
		              <tr>
		                <th scope="row">例子</th>
		                <td>p=2</td>
		                <td>q=volksvagon</td>
		                <td>order=id</td>
		              </tr>
		            </tbody>
		      </table>
			</div>
			
			<div class="panel panel-info" id="classPropertiesDiv" style="display: none">
			      <div class="panel-heading">
			        <h3 class="panel-title"><b>属性列表(可用作order入参)</b></h3>
			      </div>
			      <table class="table table-bordered">
		            <!-- Table -->
		            <thead>
		              <tr>
		                <th>No.</th>
		                <th>属性名</th>
		                <th>说明</th>
		                <th>注释</th>
		              </tr>
		            </thead>
		            <tbody id="classPropertiesBody">
		            </tbody>
		      </table>
			</div>


	    </div>

	    <div id="menu3" class="tab-pane fade">
	    	<h3 style="margin-bottom: 20px">用户评论</h3>
	    	<div class="row">
			    <div class="col-md-10">
			        <ul class="media-list" id="commentBody">
			        	<li class="media">
			                <!-- <div class="media-left">
			                    <a href="#">
			                        <img class="media-object img-circle" src="css/img/c.png" alt="菜鸟">
			                    </a>
			                </div> -->
			                <div class="media-body">
			                    <h4 class="media-heading">菜鸡一枚我不哭</h4>
			                    <p>呵呵，楼上的真搞笑，这个评论模板的插件好丑陋，简直丑爆了，我简单做的都比这个好，信不信，我分分钟肥腻做出来一个，吓屎你们这群都比</p>
			                    <div class="ds-comment-footer">
			                        <span>2016年5月10日</span>
			                    </div>
			                </div>
			            </li>
	    				<hr style="background-color: #999;height: 1px" />
			        </ul>
			    </div>
			</div>
			<div id="editor">
				<p>请<a href="login.html">登录</a>后评论</p>
			</div>
			<button type="button" class="btn btn-primary pull-right" style="margin-top: 20px;margin-bottom: 20px" 
			id="commentSubmitBtn">提交</button>
	    </div>

	    <div id="menu4" class="tab-pane fade">			
			<div class="row">
		<div class="col-md-5" style="background-color:">
			<div class="page-header">
				<h4>
					左侧：当前数据集
				</h4>
			</div>
			<form class="form-group" enctype="multipart/form-data">
			
					<div class="form-group">
						<label>辅助添加标签属性（可选填）：</label> 				  
						<input id="customLabel" style="width:80%" type="text"  class="form-control" placeholder="例: http://www.library.cn/bookTitle">
						<br>
						<p><em>除rdfs:label，foaf:name，dc:subject等常见标签，您可添加其他用户标签属性：</em></p>

					</div>			
			</form>
		</div>
		<div class="col-md-2">
		</div>
		<div class="col-md-5" style="background-color:">
			<div class="page-header">
				<h4>
					右侧：选择目标数据（链接的目标）
				</h4>
			</div> 
			<label class="checkbox"><input type="radio" value="0" name="targetKG" checked='checked' /> 英文知识库：DBPedia 维基百科 （已正式开通）</label> 
			<label class="checkbox"><input type="radio" value="1" name="targetKG" /> 中文知识库：众源百度百科知识库 （建设中，Coming soon...）</label>
			<label class="checkbox"><input type="radio" value="2" name="targetKG" /> PubMed：最大的医学文献库 （测试阶段）</label>
			<hr />
			<button class="btn btn-info" type="button" id="clickShow" onclick="urlMapNshow()" >点击一键融合(结果显示在下方)</button>
			<br/>融合URL:<p id="clickShowURL"></p>
			<!--<button class="btn btn-info" type="button">链接&amp;生成TTL文件</button>-->
		</div>
	</div>
	<hr>
	<div class="row">
		<div class="col-md-12">
			<label>输出链接结果：</label>
			<textarea rows="20" class="form-control" name="mappedThings" id="mapresult">
输出结果会以 owl:sameAs 的属性展示每一条记录。
			</textarea>
			<br>
		</div>
	</div>
	
		</div>
	  </div><!-- end of the content -->
	</div><!--end of the row-->


	
	<div class="clear"></div>
</div>
<!--  
	底部
-->
<div class="copyright">
	Copyright @ 2016-2017 语义(上海)信息科技有限公司 &nbsp;&nbsp;&nbsp;&nbsp;技术支持：星巢网络
</div>

</body>
</html>
<script type="text/javascript" src="js/App.min.js"></script>
<script type="text/javascript">
window.onload = webvowl.app().initialize;

function goto() {
	var iri = location.hash.split("iri=")[1];
	window.open("/visweb/#iri=" + iri);
}

function owl() {
	var iri = location.hash.split("iri=")[1];
	window.open(iri);
}

function queryComment(statisticsId){
	$.ajax({
		url:"http://www.usources.cn/api/statistics/queryComment",
	    type:'GET',
		xhrFields: {
		   withCredentials: true
		},
	    crossDomain:true, 
	    data:{statisticsId:statisticsId},
	    success:function(data){
	    	data = eval("("+data+")");
	    	if(data.data.list.length>0){
	    		var list = data.data.list;
	    		var htmlStr = ""
	    		for(var i = 0;i<list.length;i++){
	    			htmlStr += '<li class="media"><div class="media-body"><h4 class="media-heading" style="font-weight:600">'+list[i].userName+
	    			'</h4><p>'+list[i].comment+'</p><div class="ds-comment-footer"><span style="font-size:10px">'+list[i].createdTime+
	    			'</span></div></div></li><hr style="background-color: #999;height: 1px" />';
	    		}
	    		$("#commentBody").html(htmlStr);
	    	}else{
	    		$("#commentBody").html("<div style='margin:20px auto;width:100px;font-size:20px'>暂无评论!</div>");
	    	}
	    },
	    error:function(e){
	   	 $("#commentBody").html("");
	   	 console.log(e);
	   	 alert("服务异常,请稍后重试");
	    }
	});
}
</script>
